<template>
  <div class="b-article-add">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="文章标题" prop="title">
        <el-col :span="12">
          <el-input
            name="title"
            v-model="ruleForm.title"
            placeholder="请输入标题"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="SEO关键词" prop="keyword">
        <el-col :span="12">
          <el-input
            name="keyword"
            v-model="ruleForm.keyword"
            placeholder="请输入关键词"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="SEO描述" prop="description">
        <el-col :span="12">
          <el-input
            type="textarea"
            :rows="3"
            name="description"
            v-model="ruleForm.description"
            placeholder="请输入SEO描述"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="文章分类" prop="cate">
        <el-col :span="12">
          <el-select
            name="cate"
            v-model="ruleForm.cate"
            placeholder="请选择分类"
            size="medium"
            popper-class="b-select"
          >
            <el-option
              v-for="cateItem in cateOptions"
              :key="cateItem.value"
              :label="cateItem.label"
              :value="cateItem.value"
            ></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="文章标签" prop="tag">
        <el-col :span="12">
          <el-select
            name="tag"
            v-model="ruleForm.tag"
            placeholder="请选择分类"
            :multiple="true"
            size="medium"
            popper-class="b-select"
          >
            <el-option
              v-for="tagItem in tagOptions"
              :key="tagItem.value"
              :label="tagItem.label"
              :value="tagItem.value"
            ></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-row>
        <el-col :span="2">
          <el-form-item label="是否原创">
            <el-col :span="1">
              <el-switch
                v-model="ruleForm.isOriginal"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="是否显示">
            <el-col :span="1">
              <el-switch
                v-model="ruleForm.isShow"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="是否置顶">
            <el-col :span="1">
              <el-switch
                v-model="ruleForm.isTop"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="是否精华">
            <el-col :span="1">
              <el-switch
                v-model="ruleForm.isElite"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="是否热门">
            <el-col :span="1">
              <el-switch
                v-model="ruleForm.isHot"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="推荐首页">
            <el-col :span="1">
              <el-switch
                v-model="ruleForm.isIndex"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="作者" prop="author">
        <el-col :span="12">
          <el-input
            name="author"
            v-model="ruleForm.author"
            placeholder="请输入作者"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item
        label="原文地址"
        prop="originalUrl"
        v-if="!ruleForm.isOriginal"
      >
        <el-col :span="12">
          <el-input
            name="originalUrl"
            v-model="ruleForm.originalUrl"
            placeholder="请输入原文地址"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="排序">
        <el-col :span="2">
          <el-input
            name="sort"
            v-model="ruleForm.sort"
            placeholder="请输入排序编号"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="文章内容" prop="content">
        <el-col :span="12">
          <el-input
            type="textarea"
            :rows="20"
            name="content"
            v-model="ruleForm.content"
            placeholder="请输入文章内容"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即发布</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "BArticleAdd",
  data() {
    return {
      ruleForm: {
        title: "使用 vue-cli 创建项目",
        keyword: "vue, vue-cli, 创建项目,vue项目,脚手架",
        description: "vue, vue-cli, 创建项目,vue项目,脚手架",
        cate: "1",
        tag: ["1", "2", "3", "4", "5"],
        author: "子言。",
        content: "",
        sort: "",
        originalUrl: "http://www.bliss96998.com/article/1",
        isOriginal: true,
        isShow: true,
        isTop: false,
        isElite: false,
        isHot: false,
        isIndex: false
      },
      tagOptions: [
        { value: "1", label: "前端" },
        { value: "2", label: "后端" },
        { value: "3", label: "生活" },
        { value: "4", label: "管理" },
        { value: "5", label: "随笔" }
      ],
      cateOptions: [
        { value: "1", label: "技术文章" },
        { value: "2", label: "生活随笔" },
        { value: "3", label: "团队管理" },
        { value: "4", label: "学习笔记" }
      ],
      rules: {
        title: [
          { required: true, message: "请输入文章标题", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ],
        keyword: [{ required: true, message: "请输入关键词", trigger: "blur" }],
        description: [
          { required: true, message: "请输入SEO描述", trigger: "blur" }
        ],
        cate: [
          { required: true, message: "请选择文章分类", trigger: "change" }
        ],
        tag: [{ required: true, message: "请选择文章标签", trigger: "change" }],
        author: [
          { required: true, message: "请输入作者", trigger: "blur" },
          { min: 3, max: 16, message: "长度在 3 到 16 个字符", trigger: "blur" }
        ],
        originalUrl: [
          { required: true, message: "请输入原文地址", trigger: "blur" }
        ],
        content: [
          { required: true, message: "请输入文章内容", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      console.log(formName);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="scss" scoped>
.b-article-add {
  .el-select {
    width: 100%;
  }
}
</style>
